React Custom Hook State Machine: Opanowanie Abstrahowania Złożonej Logiki Stanu

Wraz ze wzrostem złożoności aplikacji React, zarządzanie stanem może stać się poważnym wyzwaniem. Tradycyjne podejścia z użyciem `useState` i `useEffect` mogą szybko prowadzić do splątanej logiki i trudnego w utrzymaniu kodu, zwłaszcza w przypadku skomplikowanych przejść stanów i efektów ubocznych. W tym miejscu z pomocą przychodzą automaty stanów, a konkretnie React custom hooks, które je implementują. Ten artykuł poprowadzi Cię przez koncepcję automatów stanów, zademonstruje, jak implementować je jako custom hooks w React i zilustruje korzyści, jakie oferują one w budowaniu skalowalnych i łatwych w utrzymaniu aplikacji dla globalnej publiczności.

Co to jest automat stanów?

Automat stanów (lub automat skończony, FSM) to matematyczny model obliczeń, który opisuje zachowanie systemu poprzez zdefiniowanie skończonej liczby stanów i przejść między tymi stanami. Pomyśl o tym jak o schemacie blokowym, ale z bardziej rygorystycznymi zasadami i bardziej formalną definicją. Kluczowe koncepcje obejmują:

• Stany: Reprezentują różne warunki lub fazy systemu.
• Przejścia: Definiują, jak system przechodzi z jednego stanu do drugiego w oparciu o określone zdarzenia lub warunki.
• Zdarzenia: Wyzwalacze, które powodują przejścia stanów.
• Stan Początkowy: Stan, w którym system się uruchamia.

Automaty stanów doskonale sprawdzają się w modelowaniu systemów z dobrze zdefiniowanymi stanami i jasnymi przejściami. Przykłady obfitują w rzeczywistych scenariuszach:

• Sygnalizacja Świetlna: Przechodzi przez stany takie jak Czerwony, Żółty, Zielony, z przejściami wywoływanymi przez timery. Jest to przykład rozpoznawalny na całym świecie.
• Przetwarzanie Zamówień: Zamówienie w e-commerce może przechodzić przez stany takie jak "Oczekujące", "Przetwarzane", "Wysłane" i "Dostarczone". Ma to zastosowanie uniwersalnie w handlu detalicznym online.
• Przepływ Uwierzytelniania: Proces uwierzytelniania użytkownika może obejmować stany takie jak "Wylogowany", "Logowanie", "Zalogowany" i "Błąd". Protokoły bezpieczeństwa są generalnie spójne w różnych krajach.

Dlaczego warto używać automatów stanów w React?

Włączenie automatów stanów do komponentów React oferuje kilka istotnych zalet:

• Ulepszona Organizacja Kodu: Automaty stanów wymuszają uporządkowane podejście do zarządzania stanem, dzięki czemu kod jest bardziej przewidywalny i łatwiejszy do zrozumienia. Koniec ze spaghetti code!
• Zmniejszona Złożoność: Poprzez wyraźne zdefiniowanie stanów i przejść, możesz uprościć złożoną logikę i uniknąć niezamierzonych efektów ubocznych.
• Zwiększona Testowalność: Automaty stanów są z natury testowalne. Możesz łatwo zweryfikować, czy system zachowuje się poprawnie, testując każdy stan i przejście.
• Zwiększona Utrzymywalność: Deklaratywny charakter automatów stanów ułatwia modyfikowanie i rozszerzanie kodu w miarę rozwoju aplikacji.
• Lepsze Wizualizacje: Istnieją narzędzia, które mogą wizualizować automaty stanów, zapewniając jasny przegląd zachowania systemu, pomagając we współpracy i zrozumieniu w zespołach o różnych umiejętnościach.

Implementacja automatu stanów jako React Custom Hook

Zilustrujmy, jak zaimplementować automat stanów za pomocą React custom hook. Stworzymy prosty przykład przycisku, który może być w trzech stanach: `idle`, `loading` i `success`. Przycisk zaczyna się w stanie `idle`. Po kliknięciu przechodzi do stanu `loading`, symuluje proces ładowania (za pomocą `setTimeout`), a następnie przechodzi do stanu `success`.

1. Zdefiniuj Automat Stanów

Najpierw definiujemy stany i przejścia naszego automatu stanów przycisku:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // After 2 seconds, transition to success
      },
    },
    success: {},
  },
};

Ta konfiguracja wykorzystuje podejście niezależne od biblioteki (choć inspirowane przez XState) do zdefiniowania automatu stanów. Zaimplementujemy logikę interpretacji tej definicji samodzielnie w custom hook. Właściwość `initial` ustawia stan początkowy na `idle`. Właściwość `states` definiuje możliwe stany (`idle`, `loading` i `success`) i ich przejścia. Stan `idle` ma właściwość `on`, która definiuje przejście do stanu `loading`, gdy wystąpi zdarzenie `CLICK`. Stan `loading` używa właściwości `after`, aby automatycznie przejść do stanu `success` po 2000 milisekundach (2 sekundy). Stan `success` jest stanem końcowym w tym przykładzie.

2. Stwórz Custom Hook

Teraz stwórzmy custom hook, który implementuje logikę automatu stanów:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Ten hook `useStateMachine` przyjmuje definicję automatu stanów jako argument. Używa `useState` do zarządzania bieżącym stanem i kontekstem (wyjaśnimy kontekst później). Funkcja `transition` przyjmuje zdarzenie jako argument i aktualizuje bieżący stan w oparciu o zdefiniowane przejścia w definicji automatu stanów. Hook `useEffect` obsługuje właściwość `after`, ustawiając timery, aby automatycznie przejść do następnego stanu po określonym czasie trwania. Hook zwraca bieżący stan, kontekst i funkcję `transition`.

3. Użyj Custom Hook w Komponencie

Na koniec użyjmy custom hook w komponencie React:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // After 2 seconds, transition to success
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

Ten komponent używa hooka `useStateMachine` do zarządzania stanem przycisku. Funkcja `handleClick` wysyła zdarzenie `CLICK`, gdy przycisk zostanie kliknięty (i tylko wtedy, gdy jest w stanie `idle`). Komponent renderuje inny tekst w zależności od bieżącego stanu. Przycisk jest wyłączony podczas ładowania, aby zapobiec wielokrotnym kliknięciom.

Obsługa Kontekstu w Automatach Stanów

W wielu rzeczywistych scenariuszach automaty stanów muszą zarządzać danymi, które utrzymują się podczas przejść stanów. Te dane nazywane są kontekstem. Kontekst pozwala na przechowywanie i aktualizowanie istotnych informacji w miarę postępu automatu stanów.

Rozszerzmy nasz przykład przycisku, aby uwzględnić licznik, który zwiększa się za każdym razem, gdy przycisk zostanie pomyślnie załadowany. Zmodyfikujemy definicję automatu stanów i custom hook, aby obsługiwać kontekst.

1. Zaktualizuj Definicję Automatu Stanów

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

Dodaliśmy właściwość `context` do definicji automatu stanów z początkową wartością `count` równą 0. Dodaliśmy również akcję `entry` do stanu `success`. Akcja `entry` jest wykonywana, gdy automat stanów wchodzi w stan `success`. Przyjmuje bieżący kontekst jako argument i zwraca nowy kontekst ze zwiększoną wartością `count`. `entry` pokazuje tutaj przykład modyfikacji kontekstu. Ponieważ obiekty Javascript są przekazywane przez odniesienie, ważne jest, aby zwrócić *nowy* obiekt zamiast mutować oryginalny.

2. Zaktualizuj Custom Hook

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Zaktualizowaliśmy hook `useStateMachine`, aby zainicjować stan `context` z `stateMachineDefinition.context` lub pustym obiektem, jeśli nie podano kontekstu. Dodaliśmy również `useEffect` do obsługi akcji `entry`. Gdy bieżący stan ma akcję `entry`, wykonujemy ją i aktualizujemy kontekst zwróconą wartością.

3. Użyj Zaktualizowanego Hook w Komponencie

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    

      
        {buttonText}
      
      
Count: {context.count}
    
  );
};

export default MyButton;

Teraz uzyskujemy dostęp do `context.count` w komponencie i wyświetlamy go. Za każdym razem, gdy przycisk zostanie pomyślnie załadowany, licznik zostanie zwiększony.

Zaawansowane Koncepcje Automatów Stanów

Chociaż nasz przykład jest stosunkowo prosty, automaty stanów mogą obsługiwać znacznie bardziej złożone scenariusze. Oto kilka zaawansowanych koncepcji do rozważenia:

• Strażnicy: Warunki, które muszą zostać spełnione, aby nastąpiło przejście. Na przykład przejście może być dozwolone tylko wtedy, gdy użytkownik jest uwierzytelniony lub jeśli określona wartość danych przekracza próg.
• Akcje: Efekty uboczne, które są wykonywane podczas wchodzenia lub wychodzenia ze stanu. Mogą one obejmować wykonywanie wywołań API, aktualizowanie DOM lub wysyłanie zdarzeń do innych komponentów.
• Stany Równoległe: Pozwalają modelować systemy z wieloma współbieżnymi działaniami. Na przykład odtwarzacz wideo może mieć jeden automat stanów dla elementów sterujących odtwarzaniem (odtwarzanie, pauza, zatrzymanie) i inny do zarządzania jakością wideo (niska, średnia, wysoka).
• Stany Hierarchiczne: Pozwalają na zagnieżdżanie stanów wewnątrz innych stanów, tworząc hierarchię stanów. Może to być przydatne do modelowania złożonych systemów z wieloma powiązanymi stanami.

Alternatywne Biblioteki: XState i Więcej

Chociaż nasz custom hook zapewnia podstawową implementację automatu stanów, istnieje kilka doskonałych bibliotek, które mogą uprościć proces i zaoferować bardziej zaawansowane funkcje.

XState

XState to popularna biblioteka JavaScript do tworzenia, interpretowania i wykonywania automatów stanów i wykresów stanów. Zapewnia potężny i elastyczny interfejs API do definiowania złożonych automatów stanów, w tym obsługę strażników, akcji, stanów równoległych i stanów hierarchicznych. XState oferuje również doskonałe narzędzia do wizualizacji i debugowania automatów stanów.

Inne Biblioteki

Inne opcje obejmują:

• Robot: Lekka biblioteka do zarządzania stanem, koncentrująca się na prostocie i wydajności.
• react-automata: Biblioteka zaprojektowana specjalnie do integrowania automatów stanów z komponentami React.

Wybór biblioteki zależy od specyficznych potrzeb Twojego projektu. XState jest dobrym wyborem dla złożonych automatów stanów, podczas gdy Robot i react-automata są odpowiednie dla prostszych scenariuszy.

Najlepsze Praktyki Używania Automatów Stanów

Aby skutecznie wykorzystywać automaty stanów w aplikacjach React, rozważ następujące najlepsze praktyki:

• Zacznij Mało: Zacznij od prostych automatów stanów i stopniowo zwiększaj złożoność w razie potrzeby.
• Wizualizuj Swój Automat Stanów: Użyj narzędzi wizualizacyjnych, aby uzyskać jasne zrozumienie zachowania swojego automatu stanów.
• Pisz Kompleksowe Testy: Dokładnie przetestuj każdy stan i przejście, aby upewnić się, że system zachowuje się poprawnie.
• Dokumentuj Swój Automat Stanów: Jasno dokumentuj stany, przejścia, strażników i akcje swojego automatu stanów.
• Rozważ Internacjonalizację (i18n): Jeśli Twoja aplikacja jest skierowana do globalnej publiczności, upewnij się, że logika automatu stanów i interfejs użytkownika są odpowiednio zinternacjonalizowane. Na przykład użyj oddzielnych automatów stanów lub kontekstu, aby obsługiwać różne formaty dat lub symbole walut w zależności od ustawień regionalnych użytkownika.
• Dostępność (a11y): Upewnij się, że przejścia stanów i aktualizacje interfejsu użytkownika są dostępne dla użytkowników z niepełnosprawnościami. Użyj atrybutów ARIA i semantycznego HTML, aby zapewnić odpowiedni kontekst i informacje zwrotne technologiom wspomagającym.

Wnioski

React custom hooks w połączeniu z automatami stanów stanowią potężne i skuteczne podejście do zarządzania złożoną logiką stanu w aplikacjach React. Poprzez abstrahowanie przejść stanów i efektów ubocznych do dobrze zdefiniowanego modelu, możesz poprawić organizację kodu, zmniejszyć złożoność, zwiększyć testowalność i zwiększyć utrzymywalność. Niezależnie od tego, czy zaimplementujesz własny custom hook, czy wykorzystasz bibliotekę taką jak XState, włączenie automatów stanów do przepływu pracy React może znacząco poprawić jakość i skalowalność Twoich aplikacji dla użytkowników na całym świecie.